<template>
  <div class="home-box">
    <!-- 轮播图区域 -->
    <mt-swipe class="mt-swipe" :auto="4000">
      <mt-swipe-item class="mt-swipe-item" v-for="item in lunbotuList" :key="item.id">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>
    <!-- 九宫格改造为六宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
		        <img src="../../images/menu1.png" alt="">
		        <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
		        <img src="../../images/menu2.png" alt="">
		        <div class="mui-media-body">图片分享</div>
          </a>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
		        <img src="../../images/menu3.png" alt="">
		        <div class="mui-media-body">商品购买</div>
          </a>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
		        <img src="../../images/menu4.png" alt="">
		        <div class="mui-media-body">留言反馈</div>
          </a>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
		        <img src="../../images/menu5.png" alt="">
		        <div class="mui-media-body">视屏专区</div>
          </a>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
		        <img src="../../images/menu6.png" alt="">
		        <div class="mui-media-body">联系我们</div>
          </a>
        </li>
		</ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        lunbotuList: [] // 保存轮播图的数组
      };
    },
    created() {
      this.getLunbotu();
    },
    methods: {
      getLunbotu() {
        // 获取轮播图数据的方法
        this.$http.get("api/getlunbo").then(result => {
          if (result.body.status === 0) {
            this.lunbotuList = result.body.message
          } else {
            console.log('请求失败');
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .home-box{
    .mt-swipe{
      height: 200px;
      img{
        width: 100%;
      }
    }
    .mui-grid-view.mui-grid-9{
      background-color: #fff;
      border: none;
      .mui-media{
        background-color: #fff;
        border: none;
        img{
          width: 60px;
        }
      }
    }
  }
</style>
